<template>
    <div class="myInput">
        <form>
            <input type="text" placeholder="搜索课程">
            <button>
                <div>
                    <a-icon type="search" class="search"/>
                    <span>搜索</span>
                </div>
            </button>
        </form>
    </div>
</template>

<script>
    export default {
        name: "MyInput"
    }
</script>

<style scoped>
    .myInput {
        width: 400px;
        height: 40px;
    }
    .myInput>form{
        display: flex;
    }
    .myInput>form>input {
        width: 320px;
        height: 40px;
        outline: 0;
        border-radius: 20px 0px 0px 20px;
        border: 1px solid gainsboro;
        box-sizing: border-box;
        text-indent: 1em;
    }
    .myInput>form>button {
        width: 80px;
        height: 40px;
        outline: 0;
        border: 0;
        border-radius: 0px 20px 20px 0px;
        background-color: rgb(0,207,140);
        color: #fff;
    }
    .myInput>form>button span{
        margin-left: 5px;
        font-size: 16px;
        /*line-height: 40px;*/
    }
    .search {
        font-size: 16px;
    }
</style>